<template>
  <div class="bg">
	<goback title="资料中心"></goback>
	<div class="card">
		<div class="card_title">资料卡</div>
		<div class="head_box">
			<div class="left_box">
				<img :src="getImageUrl(this.user.uid)"/>
			</div>
			<div class="right_box">
				<div>{{this.user.name}} Lv.{{userInfo.level}}</div>
				<div v-if="this.user.position==0">农户</div>
				<div v-if="this.user.position==1">企业</div>
				<div>积分: {{this.user.score}}</div>
				<div>UID: {{this.user.uid}}</div>
			</div>
		</div>
		
	</div>
	
	
	
	<div class="card">
		<div class="card_title">联系方式</div>
		<div class="card_position">
			手机号: {{this.user.telephone}}
		</div>
		<div class="card_title">所在地</div>
		<div class="card_position">
			地区: {{this.user.address}}
		</div>
		
	</div>


	
	 <button class="editInfoButton" v-if="is_mine">编辑资料卡</button>  
	 <button class="editInfoButton" v-else @click="msg">私信</button>  
  </div>
</template>

<script>
export default {
  name: "userInfo",
  data(){
	  return{
		  user:{
			  
		  },
		   userInfo: {  
		          avatar: '',  
		          username: '',  
		          phone: '',  
		          address: '',  
		          level: '1',  
		          points: 1 
		        },  
		        is_mine: false
	  }
  },
  mounted() {
  	this.init();
  },
  methods:{
	  msg(){
		this.$router.push('/message?uid='+this.user.uid);  
	  },
	  init(){
		  this.axios.get(`${this.IP}/getUserByUID`, {
		  	params:{
		  		uid: this.$route.query.uid
		  	}
		  }).then(res => {
		  	this.user=res.data;
			
		  }).catch(error => {
		  	// 处理错误  
		  	console.error('请求出错：', error);
		  });;
	  },
	  getImageUrl(uid) {
	  	return `${this.IP}/img/${this.user.uid}.jpg`;
	  },
  }
}
</script>

<style scoped>  
.card{
	margin-top: 5vw;
}
.editInfoButton{
	width: 98vw;
	margin: 1vw;
	background-color: #fff;
	text-align: center;
	position: fixed;
	bottom: 0;
	padding: 3vw;
	border-radius: 5vw;
	font-size: 30px;
	background: linear-gradient(to right, #ffcf0e, #ff8002);
}
.head_box{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
}
.right_box{
	flex: 1;
	display: flex;
	flex-direction: column;
	padding-top: 5vw;
}
.right_box div:nth-child(1){
	font-size: 42px;
}

.right_box div{
	font-size: 32px;
	padding-bottom: 2vw;
	color: #333;
}

.head_box img{
	padding: 3vw;
	width: 32vw;
	height: 36vw;
	border-radius: 10vw;
}
.card_position{
	padding: 3vw;
	font-size:28px;
}

</style>
